<template>
  <div class="Home">
    <div class="Banner">
      <Banner />
    </div>
    <div class="server">
      <div class="header">
        <img src="@/assets/images/home/zhua.png" alt="" />
        <h2>我们的服务</h2>
        <div>
          <span></span>
          <span>our services</span>
          <span></span>
        </div>
      </div>
      <div class="container">
        <img src="@/assets/images/home/us_server.png" alt="" />
      </div>
    </div>
    <!-- 萌宠展示 -->
    <div class="pet" ref="petTop">
      <div class="container">
        <div class="left">
          <p>动物是人类的朋友。在这里，每一个热爱宠物的人</p>
          <p>不但能找到他们想要的，而且能得到比他们想要的更多。</p>
          <div class="bottom">
            所有品种<i class="iconfont icon-xiangyou"></i>
          </div>
        </div>
        <div class="right">
          <div class="header">
            <h2>萌宠展示</h2>
            <div class="bottom">
              <div>
                <i @click="petToggle('prv')" class="iconfont icon-xiangyou"></i>
              </div>
              <div>
                <i
                  @click="petToggle('next')"
                  class="iconfont icon-xiangyou"
                ></i>
              </div>
            </div>
          </div>
          <div class="content">
            <div
              ref="pet"
              class="owl-wrapper"
              :style="{
                width: pet.width + 'px',
              }"
            >
              <div
                class="owl-item"
                style="width: 248px"
                v-for="item in petList"
                :key="item"
              >
                <img src="@/assets/images/home/pet-1.jpg" alt="" />
                <p class="title">法国斗牛犬</p>
                <div class="san"></div>
                <p class="scription">聪明敏捷 开朗不常吠</p>
                <div class="gbOpacity"></div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 产品中心 -->
    <div class="produce-conter">
      <div class="header">
        <h2>产品中心</h2>
        <div>
          <span></span>
          <span>Product</span>
          <span></span>
        </div>
      </div>
      <div class="container">
        <div class="top">
          <div>
            <img src="@/assets/images/home/product-1.jpg" alt="" />
            <span>保护带</span>
          </div>
          <div>
            <img src="@/assets/images/home/product-2.jpg" alt="" />
            <span>保护带</span>
          </div>
        </div>
        <div class="middle">
          <div>
            <img src="@/assets/images/home/product-3.jpg" alt="" />
            <span>窝</span>
          </div>
          <div>
            <img src="@/assets/images/home/product-4.jpg" alt="" />
            <span>小零食</span>
          </div>
          <div>
            <img src="@/assets/images/home/product-5.jpg" alt="" />
            <span>服饰</span>
          </div>
        </div>
        <div class="bottom">
          <div>
            <img src="@/assets/images/home/product-6.jpg" alt="" />
            <span>服饰</span>
          </div>
          <div>
            <img src="@/assets/images/home/product-7.jpg" alt="" />
            <span>服饰</span>
          </div>
        </div>
      </div>
      <!-- 产品推荐 -->
      <div class="recommend">
        <h4>产品推荐</h4>
        <div class="content">
          <div>
            <div class="Img">
              <img src="@/assets/images/home/product-like-1.jpg" alt="" />
            </div>
            <span>产品名称</span>
            <span>￥89</span>
          </div>
          <div>
            <div class="Img">
              <img src="@/assets/images/home/product-like-2.jpg" alt="" />
            </div>
            <span>产品名称</span>
            <span>￥89</span>
          </div>
          <div>
            <div class="Img">
              <img src="@/assets/images/home/product-like-3.jpg" alt="" />
            </div>
            <span>产品名称</span>
            <span>￥89</span>
          </div>
          <div>
            <div class="Img">
              <img src="@/assets/images/home/product-like-4.jpg" alt="" />
            </div>
            <span>产品名称</span>
            <span>￥89</span>
          </div>
        </div>
      </div>
    </div>
    <!-- 名言警句 -->
    <div class="saying1" ref="saying1">
      <p>宠物之恋，在于关爱，让你的爱宠享受家的感觉</p>
    </div>
    <!-- 公司简介 -->
    <div class="company">
      <div class="left">
        <img src="@/assets/images/home/company.jpg" alt="" />
      </div>
      <div class="right">
        <div class="header">
          <h2>公司简介</h2>
          <div>
            <span></span>
            <span>About Us</span>
            <span></span>
          </div>
        </div>
        <div class="scription">
          <p>
            宠物（pet）指人们为了精神目的，而不是为了经济目的而豢养的生物。传统的宠物是指哺乳纲或鸟纲的动物，养着用于玩赏和作伴。实际生活中的宠物包括鱼纲、爬行纲、两栖纲、昆虫，甚至植物，用于观赏、作伴、舒缓人们的精神压力。随着时代的发展，宠物的范围很广，包括动物、植物、虚拟宠物、电子宠物等。但大多数国家的法律还是把宠物限定在动物范畴内。饲养宠物作为人类亲近自然的机会，可以满足人类的心理需求，是非常健康正常的爱好。2019年7月，一项鼻纹识别解决方案推出，并已最先应用于犬只身份认证。这一方案将有助于城市中的宠物管理，使AI寻宠、宠物门禁、在线犬证办理等成为可能。
          </p>
          <span>查看详细</span>
        </div>
      </div>
    </div>
    <!-- 新闻中心 -->
    <div class="news">
      <div class="header">
        <h2>新闻中心</h2>
        <div>
          <span></span>
          <span>news</span>
          <span></span>
        </div>
      </div>
      <div class="container">
        <div class="item">
          <a href="#">
            <div class="top">
              <img src="@/assets/images/home/news-1.jpg" alt="" />
              <div class="content">
                <h3>怎么制止拉布拉多乱叫</h3>
                <p class="date">
                  2018-04-12 <i class="iconfont icon-liaotian"></i>24赞
                </p>
                <p class="scription">
                  怎么制止拉布拉多乱叫怎么制，止拉布拉多乱叫怎么制止拉布拉多乱叫怎么制止拉布拉多乱叫怎么制止,拉布拉多乱叫怎么制止拉布拉多乱叫
                </p>
              </div>
            </div>
            <div class="bottom">查看详情</div>
          </a>
        </div>
        <div class="item">
          <a href="#">
            <div class="top">
              <img src="@/assets/images/home/news-2.jpg" alt="" />
              <div class="content">
                <h3>怎么制止拉布拉多乱叫</h3>
                <p class="date">
                  2018-04-12 <i class="iconfont icon-liaotian"></i>24赞
                </p>
                <p class="scription">
                  怎么制止拉布拉多乱叫怎么制，止拉布拉多乱叫怎么制止拉布拉多乱叫怎么制止拉布拉多乱叫怎么制止,拉布拉多乱叫怎么制止拉布拉多乱叫
                </p>
              </div>
            </div>
            <div class="bottom">查看详情</div>
          </a>
        </div>
        <div class="item">
          <a href="#">
            <div class="top">
              <img src="@/assets/images/home/news-3.jpg" alt="" />
              <div class="content">
                <h3>怎么制止拉布拉多乱叫</h3>
                <p class="date">
                  2018-04-12 <i class="iconfont icon-liaotian"></i>24赞
                </p>
                <p class="scription">
                  怎么制止拉布拉多乱叫怎么制，止拉布拉多乱叫怎么制止拉布拉多乱叫怎么制止拉布拉多乱叫怎么制止,拉布拉多乱叫怎么制止拉布拉多乱叫
                </p>
              </div>
            </div>
            <div class="bottom">查看详情</div>
          </a>
        </div>
      </div>
    </div>
    <!-- 名言警句 -->
    <div class="saying2">
      <div class="container">
        <div class="left">
          <img src="@/assets/images/home/dog.png" alt="" />
        </div>
        <div class="right">
          <h3>动物是人类的朋友</h3>
          <p>
            从分享你我的养宠心情到爱宠人之间的经验交流，从网上购物到在线医疗，宠物生活中涉及的方方面面，都在不断努力将它们做到最好。在这里，每一个热爱宠物的人，不但能找到他们想要的，而且能得到比他们想要的更多。
          </p>
          <a href="javascript:;" title="点击跳转到新闻中心" class="bottom"
            >了解更多</a
          >
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Banner from "../../components/Banner";
export default {
  name: "myHome",
  components: { Banner },
  data() {
    return {
      petList: [],
      pet: {
        width: 0,
        left: 0,
      },
    };
  },
  methods: {
    // 宠物选项卡切换
    petToggle(toggle) {
      let left = this.pet.left;
      if (toggle == "prv") {
        left - 278 >= 0
          ? (this.pet.left = left - 278)
          : (this.pet.left = this.pet.width - 278 * 3);
      } else {
        left - 278 * 2 < 0
          ? (this.pet.left = left + 278)
          : (this.pet.left = 0 * 22);
      }
      this.$refs.pet.style.transform = `translateX(-${this.pet.left}px)`;
    },
    // 鼠标滚动事件
    scroll() {
      let top = parseInt((window.scrollY = document.documentElement.scrollTop));
      // 设置视觉差
      const saying1 = this.$refs.saying1;
      const petTop = this.$refs.petTop; // 'background-position': '50% 132px' // const saying2 = this.$refs.saying2;
      let chazhi = saying1.offsetTop - top;
      let chapet = petTop.offsetTop - top;
      // 句子的背景图
      if (-300 < chazhi && chazhi < 800) {
        saying1.style.backgroundPosition = `50% ${chazhi * 0.5}px`;
      }
      // 萌宠展示的背景图
      if (-600 < chapet && chapet < 800) {
        petTop.style.backgroundPosition = `50% ${chapet * 0.5}px`;
      }
    },
  },
  mounted() {
    this.petList = ["1", "2", "3", "4", "5"];
    this.pet.width = this.petList.length * 278;

    window.addEventListener("scroll", this.scroll);
  },
  destroyed() {
    window.removeEventListener("scroll", this.scroll);
  },
};
</script>

<style lang="less" scoped>
.Home {
  // padding-bottom: 20px;
  .Banner {
    margin-top: -60px;
    min-width: 1200px;
  }
  .server {
    width: 1200px;
    margin: 0 auto;
    padding-bottom: 20px;
    .header {
      padding: 80px 0 0 0;
      img {
        display: block;
        margin: 0 auto;
      }
      h2 {
        font-size: 24px;
        text-align: center;
        padding: 6px 0 10px 0;
        text-align: center;
      }
      > div {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 240px;
        margin: 0 auto;
        line-height: 20px;
        span:first-child,
        span:last-child {
          width: 70px;
          height: 2px;
          display: inline-block;
          background-color: #000;
          &:nth-of-type(2) {
            display: inline;
            background: none;
            font-size: 16px;
            text-align: center;
          }
        }
      }
    }
    .container {
      img {
        width: 100%;
      }
    }
  }
  .pet {
    height: 600px;
    background: url("~@/assets/images/home/bg1.jpg") 50% 77px;
    background-attachment: fixed !important;
    position: relative;
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    display: flex;
    align-items: center;
    .container {
      width: 1200px;
      margin: 0 auto;
      display: flex;
      background-color: #fff;
      height: 80%;

      .left {
        flex-basis: 28%;
        background-color: #f1ad48;
        padding: 120px 40px;
        box-sizing: border-box;
        p {
          color: #fff;
          font-size: 18px;
          line-height: 26px;
          font-weight: normal;
        }
        .bottom {
          cursor: pointer;
          margin-top: 40px;
          width: 100%;
          background-color: #fff;
          text-align: center;
          padding: 20px 0;
          border-radius: 6px;
        }
      }
      .right {
        flex-basis: 72%;
        padding: 36px 0;
        box-sizing: border-box;
        .header {
          display: flex;
          justify-content: space-between;
          padding: 0 30px;
          padding-bottom: 20px;
          h2 {
            font-size: 30px;
            line-height: 30px;
            color: #333;
          }
          .bottom {
            display: flex;
            div {
              margin-left: 4px;
              cursor: pointer;
              i {
                font-size: 30px;
                padding: 6px;
                background-color: #f6f5f2;
              }
              &:first-child {
                transform: rotate(180deg);
              }
            }
          }
        }
        .content {
          width: 840px;
          // background-color: #ccc;
          height: 360px;
          position: relative;
          overflow: hidden;
          .owl-wrapper {
            height: 360px;
            transition: all 0.6s;
            .owl-item {
              height: 360px;
              cursor: pointer;
              margin-left: 30px;
              float: left;
              position: relative;
              &:hover .gbOpacity {
                background-color: rgba(0, 0, 0, 0.3);
              }
              img {
                width: 100%;
                height: 100%;
              }
              p.title {
                position: absolute;
                color: #fff;
                bottom: 70px;
                font-size: 26px;
                text-align: center;
                font-family: "宋体";
                width: 100%;
                z-index: 1;
              }
              div.san {
                width: 50px;
                height: 4px;
                position: absolute;
                bottom: 50px;
                left: 50%;
                transform: translateX(-50%);
                background-color: #f1ad48;
                z-index: 1;
              }
              p.scription {
                width: 100%;
                position: absolute;
                bottom: 20px;
                color: #fff;
                font-size: 14px;
                text-align: center;
                z-index: 1;
              }
              .gbOpacity {
                width: 100%;
                height: 100%;
                display: block;
                position: absolute;
                top: 0;
                left: 0;

                background: linear-gradient(
                  rgba(0, 0, 0, 0),
                  rgba(0, 0, 0, 0),
                  rgba(0, 0, 0, 0.5)
                );
                transition: all 0.6s !important;
              }
            }
          }
        }
      }
    }
  }
  .produce-conter {
    width: 1200px;
    margin: 0 auto;
    > .header {
      padding-top: 40px;
      h2 {
        font-size: 24px;
        text-align: center;
        padding: 20px 0 10px 0;
        text-align: center;
      }
      > div {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 240px;
        margin: 0 auto;
        line-height: 20px;
        span:first-child,
        span:last-child {
          width: 70px;
          height: 2px;
          display: inline-block;
          background-color: #000;
          &:nth-of-type(2) {
            display: inline;
            background: none;
            font-size: 16px;
            text-align: center;
          }
        }
      }
    }
    .container {
      padding-top: 30px;
      .top {
        display: flex;
        justify-content: space-between;
        > div {
          flex-basis: 49%;
          position: relative;
          cursor: pointer;
          overflow: hidden;
          &:hover img {
            opacity: 0.8;
            transform: scale(1.04);
          }
          img {
            transition: all 0.4s;
            opacity: 1;
            width: 100%;
          }
          span {
            position: absolute;
            padding: 20px 20%;
            left: 50%;
            bottom: 30px;
            transform: translateX(-50%);
            background-color: rgba(255, 255, 255, 0.8);
            font-size: 16px;
            font-weight: bold;
          }
        }
      }
      .middle {
        display: flex;
        margin-top: 30px;
        justify-content: space-between;
        cursor: pointer;
        > div {
          flex-basis: 32%;
          position: relative;
          overflow: hidden;
          &:hover img {
            opacity: 0.8;
            transform: scale(1.04);
          }
          img {
            transition: all 0.4s;
            opacity: 1;
            width: 100%;
          }
          span {
            position: absolute;
            padding: 20px 18%;
            left: 50%;
            bottom: 30px;
            transform: translateX(-50%);
            background-color: rgba(255, 255, 255, 0.8);
            font-size: 16px;
            font-weight: bold;
          }
        }
      }
      .bottom {
        display: flex;
        margin-top: 30px;
        justify-content: space-between;
        > div {
          flex-basis: 32%;
          position: relative;
          overflow: hidden;
          cursor: pointer;
          &:first-child {
            flex-basis: 66%;
          }
          &:hover img {
            opacity: 0.8;
            transform: scale(1.04);
          }
          img {
            transition: all 0.4s;
            opacity: 1;
            width: 100%;
          }
          span {
            position: absolute;
            padding: 20px 18%;
            left: 50%;
            bottom: 30px;
            transform: translateX(-50%);
            background-color: rgba(255, 255, 255, 0.8);
            font-size: 16px;
            font-weight: bold;
          }
        }
      }
    }
    .recommend {
      padding-top: 20px;
      h4 {
        font-size: 24px;
        text-align: center;
        padding: 40px;
      }
      .content {
        display: flex;
        justify-content: space-between;
        > div {
          flex-basis: 23.5%;
          display: flex;
          flex-direction: column;
          justify-content: center;
          &:hover {
            opacity: 0.9;
          }
          .Img {
            width: 100%;
            img {
              width: 100%;
            }
          }
          span {
            text-align: center;
            padding-top: 10px;
            font-size: 18px;
            color: #333;
            &:last-child {
              font-size: 14px;
            }
          }
        }
      }
    }
  }
  .saying1 {
    margin: 40px 0;
    width: 100%;
    height: 200px;
    background-image: url(~@/assets/images/home/b2.jpg);
    background-position: 50% 129px;
    background-attachment: fixed;
    background-size: cover;
    background-repeat: no-repeat;
    position: relative;
    display: flex;
    filter: opacity(60%);
    align-items: center;
    justify-content: center;
    p {
      color: #fff;
      font-size: 28px;
      text-align: center;
      font-family: "Courier New", Courier, monospace;
    }
  }
  .company {
    display: flex;
    width: 1200px;
    margin: 0 auto;
    background-color: #fafafa;
    padding: 20px;
    margin-top: 60px;
    .left {
      flex: 1;
      padding-right: 20px;
      box-sizing: border-box;
      img {
        width: 100%;
      }
    }
    .right {
      flex: 1;
      // padding: 20px;
      .header {
        padding-top: 20px;
        h2 {
          font-size: 24px;
          text-align: center;
          padding: 20px 0 10px 0;
          text-align: center;
        }
        > div {
          display: flex;
          justify-content: space-between;
          align-items: center;
          width: 240px;
          margin: 0 auto;
          line-height: 20px;
          span:first-child,
          span:last-child {
            width: 70px;
            height: 2px;
            display: inline-block;
            background-color: #000;
            &:nth-of-type(2) {
              display: inline;
              background: none;
              font-size: 16px;
              text-align: center;
            }
          }
        }
      }
      .scription {
        padding: 20px;
        p {
          color: #333;
          font-size: 18px;
          line-height: 26px;
        }
        span {
          width: 110px;
          padding: 12px 0;
          // padding: 12px 30px;
          text-align: center;
          cursor: pointer;
          color: #fff;
          display: block;
          margin: 0 auto;
          margin-top: 20px;

          background-color: #9c6233;
        }
      }
    }
  }
  .news {
    width: 1200px;
    margin: 0 auto;
    background-color: #fafafa;
    padding: 20px;
    padding-bottom: 40px;
    .header {
      padding: 40px 0;
      h2 {
        font-size: 24px;
        text-align: center;
        padding: 20px 0 10px 0;
        text-align: center;
      }
      > div {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 240px;
        margin: 0 auto;
        line-height: 20px;
        span:first-child,
        span:last-child {
          width: 70px;
          height: 2px;
          display: inline-block;
          background-color: #000;
          &:nth-of-type(2) {
            display: inline;
            background: none;
            font-size: 16px;
            text-align: center;
          }
        }
      }
    }
    .container {
      display: flex;
      justify-content: space-between;
      .item {
        flex-basis: 32%;
        a {
          color: #333;
          text-decoration: none;
          &:hover img {
            opacity: 0.8;
            transform: scale(1.06);
          }
          .top {
            position: relative;
            overflow: hidden;
            img {
              transition: all 0.4s;
              width: 100%;
            }
            .content {
              position: absolute;
              bottom: 0;
              background-color: rgba(255, 255, 255, 0.7);
              padding: 10px;
              box-sizing: border-box;
              h3 {
                font-size: 20px;
              }
              .date {
                padding: 12px 0 16px 0;
                font-size: 14px;
                color: #666;
                i {
                  font-size: 18px;
                  padding: 0 4px 0 10px;
                }
              }
              .scription {
                margin-bottom: 4px;
                font-size: 14px;
                line-height: 22px;
                overflow: hidden;
                text-overflow: ellipsis;
                display: -webkit-box;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 2;
              }
            }
          }
          .bottom {
            width: 100%;
            // height: 40px;
            background-color: #9c6233;
            text-align: center;
            padding: 14px 0;
            color: #fff;
          }
        }
      }
    }
  }
  .saying2 {
    height: 360px;
    background-color: #f1ad48;
    .container {
      width: 1200px;
      margin: 0 auto;
      display: flex;
      height: 100%;

      .left {
        flex: 1;
        height: 100%;
        display: flex;
        align-items: center;
        img {
          // height: 100%;
          width: 100%;
        }
      }
      .right {
        flex: 1.4;
        overflow: hidden;
        h3 {
          color: #fff;
          font-size: 26px;
          font-weight: normal;
          font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
          letter-spacing: 2px;
          padding-top: 80px;
          padding-bottom: 40px;
        }
        p {
          color: #fff;
          font-size: 16px;
          line-height: 26px;
          font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
        }
        .bottom {
          cursor: pointer;
          text-decoration: none;
          float: right;
          width: 100px;
          text-align: center;
          color: #fff;
          border-radius: 4px;
          padding: 16px 0px;
          margin-top: 20px;
          border: 3px solid rgba(255, 255, 255, 0.8);
          transition: all 0.4s;
          &:hover {
            background-color: #fff;
            color: #666;
          }
        }
      }
    }
  }
}
</style>